import React from 'react';
import {QuestionParagraphDefaultProps, QuestionParagraphType} from "./interface";
import {Typography} from "antd";

const {Paragraph} = Typography
const QuestionParagraph: React.FC<QuestionParagraphType> = (props: QuestionParagraphType) => {
  const {text = '', isCenter = false} = {...QuestionParagraphDefaultProps, ...props}
  const textList = text.split('\n')//根据\n拆分成数组 【‘hello’,'123','456'】
  // 尽量不使用dangerouslySetInnerHTML,不安全

  return (
    <Paragraph
      style={{textAlign: isCenter ? 'center' : 'start'}}>
      {textList.map((item, index) =>
        <span key={index}>
          {index > 0 && <br/>}
          {item}
        </span>
      )}
    </Paragraph>
  );
};

export default QuestionParagraph;
